<template>
	<view>
		<view class="canvas-in">
			<view class="grace-canvas-img" style="width:150px;height:150px;margin-top:50px;" >
				<image src="../../static/laileme.jpg" mode="widthFix" style="width:100%;height:80%" @longpress="longpress"></image>
				<view style="margin-top:20px;z-index:999">涞了么小程序二维码 长按图片保存 ~</view>
			</view>
			<view style="width:375px;text-align:center;margin-top:20px;z-index:999">涞了么小程序二维码 长按图片保存 ~</view>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			width    : 750,   // 画布宽度，单位 rpx
			height   : 1150,  // 画布高度
			widthIn  : 300,   // 自动计算转换为 px
			heightIn : 500,  // 自动计算转换为 px
			bgColor  : '#7ACBDC', // 背景颜色
			bgImg    : 'https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200708/cbac7a710b90ed11fdcffa410f97acb4.jpg',
			imgSrc   : null 
		}
	},
	onLoad : function () {
		// 画布初始化
		this.context = uni.createCanvasContext('graceCanvas');
		this.initSize();
		//延迟1秒等待画布创建
		setTimeout(()=>{this.draw();}, 1000);
	},
	methods:{
		// 画布初始化
		initSize : function () {
			this.widthIn  = uni.upx2px(this.width);
			this.heightIn = uni.upx2px(this.height);
		},
		// 海报绘制代码
		draw : function(){
			// 步骤 01. 绘制背景颜色
			this.step01();
			// 步骤 02. 绘制背景图片（如果需要，条件结构）
			if(this.bgImg != ''){
				this.drawBGIMG(this.bgImg, ()=>{
					// 步骤 03
					this.step03();
				});
			}else{
				this.step03();
			}
		},
		// 步骤 01 : 绘制背景颜色
		step01 : function () {
			this.context.setFillStyle(this.bgColor);
			this.context.fillRect(0,0,this.widthIn, this.heightIn);
		},
		// 步骤 03 : 
		// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
		// 3.2 绘制验证码
		step03 : function () {
			// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
			this.drawText('GraceUI 更丰富 更漂亮', this.widthIn / 2, this.heightIn - 12, '#FFFFFF', 16, 'center');
			// 3.2 绘制二维码
			uni.downloadFile({
				// 此处可修改二维码数据 ?text=您的数据
			    url: 'http://qr.topscan.com/api.php?text=http://grace.hcoder.net',
			    success: (res) => {
			        if (res.statusCode === 200) {
						// 绘制二维码
						// x = (画布宽度 - 图片宽度 ) / 2
						var qrCodeWidth = 180;
						var x = (this.widthIn - qrCodeWidth) / 2;
						this.context.drawImage(res.tempFilePath,x,260,qrCodeWidth,qrCodeWidth);
						// 3.3 二维码下面的小字描述 
						this.drawText('GraceUI 官网二维码 长按图片保存 ~ ', this.widthIn / 2, 468, '#FFFFFF', 12, 'center');
						// 在最后一步执行 drawIt 完整最终的绘制
						this.drawIt();
			        }
			    },
				fail:function(e){console.log(e);}
			});
		},
		// 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式
		drawText:function(content, x, y, color, size, align){
			this.context.setFontSize(size);
			this.context.setFillStyle(color);
			this.context.setTextAlign(align);
			this.context.fillText(content,x,y);
		},
		// 最终绘制函数
		drawIt : function(){
			this.context.draw(true, ()=>{
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: this.widthIn,
				  height: this.heightIn,
				  destWidth: this.widthIn,
				  destHeight: this.heightIn,
				  canvasId: 'graceCanvas',
				  success:(res)=>{
				    // 在H5平台下，tempFilePath 为 base64
				    console.log(res)
					this.imgSrc = res.tempFilePath;
				  } 
				});
			});
		},
		// 绘制图片,参数 : 图片地址, 绘制完成后执行的回调函数
		drawBGIMG:function (img, callback){
			uni.downloadFile({
			    url: img,
			    success: (res) => {
			        if (res.statusCode == 200) {
						// 绘制
						uni.getImageInfo({
							src:res.tempFilePath,
							success:(res2)=>{
								var bgImgHeight = (this.widthIn/res2.width)*res2.height;
								console.log(bgImgHeight);
								this.context.drawImage(res.tempFilePath,0,0,this.widthIn, bgImgHeight);
								callback();
							}
						});
			        }
			    }
			});
		},
		// 长按事件
		longpress : function () {
			console.log('ok');
			uni.saveImageToPhotosAlbum({
				filePath: this.imgSrc,
				success:()=>{
					console.log('save success');
					uni.showToast({
						title:"图片已经保存到您的相册~"
					})
				}
			});
		}
	}
}
</script>
<style>
page{background-color:#7ACBDC;}
.canvas-in{width:100%; position:relative;}
.grace-canvas{}
.grace-canvas-img{ margin:0 auto;background-color: #007AFF; z-index:99;  font-size:0;display:flex;justify-content:center;}
</style>